<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="shortcut icon" href="/img/kurento.png" type="/image/png"/>

    <link rel="stylesheet" href="/webjars/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/webjars/ekko-lightbox/dist/ekko-lightbox.min.css">
    <link rel="stylesheet" href="/webjars/demo-console/index.css">
    <link rel="stylesheet" href="/css/kurento.css">

    <script src="/webjars/jquery/dist/jquery.min.js"></script>
    <script src="/webjars/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="/webjars/ekko-lightbox/dist/ekko-lightbox.min.js"></script>
    <script src="/webjars/webrtc-adapter/release/adapter.js"></script>
    <script src="/webjars/demo-console/index.js"></script>

    <script src="/js/kurento-utils.js"></script>
    <script src="/js/presenter.js"></script>
    <title>直播间</title>


    <style>
        #messageArea {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
        #messageArea div {
            margin-bottom: 5px;
        }
        #videoBig {
            position: relative;
            width: 100%;
            height: 480px;
        }
        .danmu {
            position: absolute;
            white-space: nowrap;
            color: white;
            font-size: 20px;
            text-shadow: 1px 1px 2px black;
            animation: danmuAnimation 10s linear;
            animation-fill-mode: forwards;
        }
        @keyframes danmuAnimation {
            from {
                right: -100%;
            }
            to {
                right: 100%;
            }
        }
    </style>



</head>
<body>
<header>
</header>
<div class="container">
    <div class="page-header">
    </div>
    <!-- 消息显示区域 -->
    <!--<div class="row">-->
        <!--<div class="col-md-12" id="messageArea">-->
            <!--&lt;!&ndash; 消息将显示在这里 &ndash;&gt;-->
        <!--</div>-->
    <!--</div>-->
    <!-- 视频区域 -->
    <div class="row">
        <div class="col-md-12">
            <div id="videoBig" style="width: 100%">
                <video id="video" autoplay width="100%" height="480px" poster="/img/webrtc.png"></video>
            </div>
        </div>
    </div>
    <br>
    <!-- 输入区域 -->
    <div class="row">
        <div class="col-md-12">
             <label class="control-label" for="chat_input">输入：</label>
            <div class="chat_input">
                <input type="text" id="chat_input">
                <a id="send_msg" href="javascript:void(0);" onclick="send_chat()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> 发送消息</a>
            </div>
        </div>
    </div>
    <br>
    <!-- 控制台区域 -->
    <div class="row">
        <div class="col-md-12"  style="display: none;">
            <label class="control-label" for="console">Console</label><br>
            <br>
            <div id="console" class="democonsole">
                <ul></ul>
            </div>
        </div>
    </div>
    <!-- 操作按钮区域 -->
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <a id="presenter" href="#" class="btn btn-success"><span class="glyphicon glyphicon-play"></span> 开始直播 </a>
                    <a id="stop" href="#" class="btn btn-danger"><span class="glyphicon glyphicon-stop"></span> 停止直播</a>
                </div>
            </div>
        </div>
    </div>

</div>
<footer>
    <div class="foot-fixed-bottom">
    </div>
</footer>
<script>



</script>
</body>
</html>